<script type="text/javascript"	src="%{$site_url}js/lib/jquery/jqGrid/js/grid.base.js"></script>
<link rel="stylesheet" href="%{$site_url}css/jquery/jqGrid/grid.css" type="text/css" />


<script type="text/javascript">
	$(document).ready(function() {
		$("#userContainer").jqGrid({
			url:'%{url action="admin/user/list"}',
			datatype: "json",
			colNames:['#','E-mail', 'Name', 'Phone','Roles','Status'],
			colModel:[ 
				{name:'id',index:'id', width:20}, 
				{name:'email',index:'email', width:100}, 
				{name:'name',index:'name', width:120}, 
				{name:'phone',index:'phone', width:60, align:"right"}, 
				{name:'roles',index:'roles', width:60, },
				{name:'active',index:'active', width:50, align:"center"}
			],
			rowNum:10,
			rowList:[10,20,30], 
			imgpath: "%{$site_url}images/jquery/jqGrid/",
			pager: $('#userContainer_pager'), 
			sortname: 'id', 
			viewrecords: true,
			sortorder: "desc",
			width: 410, 
			rowheight: 30, 			
			caption: "User list",
			onSelectRow: function(id){
				$("#t_userContainer_pager").show();
				$("#t_userContainer_pager a").click(function(){ 
					 window.location.href = "%{url action=" admin/user.html/id/"}" + id;
				});		
			}

		}); 
		
	});
	
</script>

<div class="content_box_large">
<p><b>ADMIN PANEL</b></p>
<table id="userContainer" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="userContainer_pager" class="scroll" style="text-align: center;"></div>
<div id="t_userContainer_pager" style="display:none">
	<a href="#">[Edit user]</a>
</div>	
</div>

